<template>
  <div style="position: relative; width: 100vw; height: calc(100vh - 40px);">
    <div ref="splitContainer" class="split-view" style="height: calc(100vh - 50px);">
      <!-- 左侧栏 -->
      <div class="split-view__pane left-pane">
        <TableListView></TableListView>
      </div>

      <!-- 中间栏 -->
      <div class="split-view__pane mid-pane">
        <ConfigTableView></ConfigTableView>
      </div>
      <!-- 右侧栏 -->
      <div class="split-view__pane right-pane">
        <TableRowInspector :tableId="tablePageStore.selectedId"
          :rowId="tablePageStore.selectedRowId"></TableRowInspector>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, toRaw } from 'vue'
import { useTextStore } from '@/stores/config/configTextStore'
import { useConfigTableStore } from '@/stores/config/configTableStore'
import { useTablePageStore } from '@/stores/config/tablePageStore' // 新增引入
import '@vue-flow/core/dist/style.css'
import "@vue-flow/core/dist/theme-default.css"

let textStore = useTextStore()
let tableStore = useConfigTableStore()
let tablePageStore = useTablePageStore() // 新增store实例
let editorSettingStore = useEditorSettingStore();

const electron = require("electron")
electron.ipcRenderer.on("textStoreChanged", (event: any, data: any) => {
    console.log("textStoreChanged:", data);
    textStore.$patch(data);
});

let saveTableData = function () {
  console.log('Save table data:');
    // electron.ipcRenderer.invoke('saveTableStore', toRaw(tableStore.$state));
    electron.ipcRenderer.invoke('saveStoreToLocal', toRaw(tableStore.$state))
      .then((result: any) => console.log('Save result:', result))
      .catch((error: any) => console.error('Save error:', error));
}
electron.ipcRenderer.on("textChanged", (event: any, data: any) => {
  console.log('Received text data:', data);
  textStore.$patch(data);
})

electron.ipcRenderer.on("dataUpdated", (event: any, data: any) => {
        textStore.$patch(data.text);
        tableStore.$patch(data.table);
        tableStore.initTableMap()
})

let getData = function () {
    electron.ipcRenderer.invoke('getData').then((data: any) => {
        console.log('Loaded text data:', data);
        textStore.$patch(data.text);
        tableStore.$patch(data.table);
        tableStore.initTableMap()
        editorSettingStore.$patch(data.editorSetting);
    });
}

getData();
// 添加键盘事件处理
const handleKeyDown = (event: KeyboardEvent) => {
  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
    event.preventDefault();
    saveTableData();
  }
};

onMounted(() => {
  window.addEventListener('keydown', handleKeyDown);
});

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeyDown);
});


import Split from 'split.js';
import { editorSettings } from './utils/defaultData'
import { useEditorSettingStore } from './stores/editorSettingStore'
import { ElMessage, ElMessageBox, type Action } from 'element-plus'
const splitContainer = ref(null);
onMounted(() => {
  // 初始化 Split.js
  Split(['.left-pane', '.mid-pane', '.right-pane'], {
    sizes: [20, 60, 20], // 初始大小比例
    minSize: [100, 100, 100], // 每个分栏的最小宽度
    gutterSize: 6, // 分隔条的宽度
    cursor: 'col-resize', // 鼠标指针样式
    onDrag: function () {
      console.log('正在拖动');
    },
    onDragEnd: function (sizes) {
      console.log('拖动结束', sizes);
    },
  });
});

</script>

<style scoped>
/* 使悬浮窗按钮浮动在页面右下角 */
.floating-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

/* 根据需要自定义悬浮窗样式 */
.floating-dialog {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 300px;
  /* 自定义样式 */
}

/* 定义整个分栏容器 */
.split-view {
  display: flex;
  flex: 1;
  height: 100%;
  /* 占据整个视口高度 */
}

/* 定义分栏的基本样式 */
.split-view__pane {
  overflow-y: auto;
  /* 如果内容超出则滚动 */
  box-sizing: border-box;
  padding: 20px;
}

/* 设置左右分栏的初始宽度 */
.left-pane {
  background-color: #e9e6e6;
  /* 示例背景颜色 */
}

.mid-pane {
  background-color: #e6e6e6;
}

.right-pane {
  background-color: #e6e6e6;
  /* 示例背景颜色 */
}
</style>
